<template>
	<view class="cart" :class="{'none': noMoreList}">
		<uni-nav-bar :fixed="true" left-icon="back"  :border="false"backgroundColor="#f9f2ea" leftText="发票" :statusBar="true" @clickLeft="goBack"></uni-nav-bar>
		<view class="goods-item flex" v-for="(item, index) in cartList" :key="index" @click="radioClick(index)">
			<view class="icon-box">
				<view class="icon" :class="{'active': item.choose}">
					<view class="icon-content">
						
					</view>
				</view>
			</view>
			<view class="item-right">
				<view class="item-right-top flex-between">
					<view class="name">
						{{item.create_time}}
					</view>
					<view class="">
						<view class="price">
							￥{{item.order_amount}}
						</view>
					</view>
				</view>
				<view class="">
					<view class="type">
						{{item.order_no}}
					</view>
					<view class="type">
						{{item.goods[0].goods_name}}
					</view>
				</view>
			</view>
		</view>
		<view class="bottom flex-between" v-show="!deleteShow">
			<view class="bottom-left flex" @click="allSelectClick">
				<view class="icon" :class="{'active': allSelect}">
					<view class="icon-content">
						
					</view>
				</view>
				<view class="text">
					全选
				</view>
			</view>
			<view class="bottom-right flex">
				<view class="btn" @click="buyNow">
					下一步
				</view>
			</view>
		</view>
		<view class="nomore" v-if="noMoreList">
			<view>没有可用发票</view>
		</view>
	</view>
</template>

<script>
	import { invoiceOrderList } from "@/api/public.js"
	export default {
		data(){
			return {
				orderType: 1,
				cartList: [],
				allSelect: false,
				noMoreList: false,
				page: 1,
			}
		},
		methods: {
			goBack(){
				uni.navigateBack();
			},
			getList(){
				invoiceOrderList(this.page).then(res=>{
					console.log(res.reData)
					if(!res.reData || res.reData.length == 0){
						this.noMoreList = true
					}else{
						this.noMoreList = false
					}
					this.cartList = res.reData.data;
				})
			},
			// 单个点选
			radioClick(index){
				console.log(index)
				if(this.cartList[index].choose){
					this.$set(this.cartList[index], "choose", false);
				}else{
					this.$set(this.cartList[index], "choose", true);
				}
				this.isAllSelect();
			},
			// 点击 全选、取消全选
			allSelectClick(){
				if(this.allSelect){
					for(let i in this.cartList){
						this.$set(this.cartList[i], "choose", false);
					}
					this.allSelect = false;
				}else{
					for(let i in this.cartList){
						this.$set(this.cartList[i], "choose", true);
					}
					this.allSelect = true;
				}
			},
			// 判断是否全选
			isAllSelect(){
				let select = true;
				for(let i in this.cartList){
					if(this.cartList[i].choose){
						
					}else{
						select = false;
					}
				}
				this.allSelect = select;
			},
			buyNow(){
				let arr = [];
				for(let i in this.cartList){
					if(this.cartList[i].choose){
						arr.push({id: this.cartList[i].id, price: this.cartList[i].order_amount})
					}
				}
				if(arr.length == 0){
					return false
				}
				uni.navigateTo({
					url: "receiptDetails?data=" + encodeURIComponent(JSON.stringify(arr))
				})
			},
		},
		onShow(){
			this.getList()
		},
	}
</script>

<style lang="scss" scoped>
.cart{
	padding: 0rpx 30rpx 100rpx;
	&.none{
		height: 100%;
	}
}
.manage{
	padding: 10rpx 30rpx 0;
	font-size: 24rpx;
	line-height: 40rpx;
	text-align: right;
}
.nav{
	width: 100%;
	background: #fff;
	display: flex;
	justify-content: space-around;
	margin-bottom: 10rpx;
	.nav-box{
		width: 50%;
	}
	.nav-item{
		box-sizing: border-box;
		width: 100rpx;
		margin: 0 auto;
		font-size: 26rpx;
		text-align: center;
		line-height: 64rpx;
		&.active{
			color: #d12a3e;
			border-bottom: 6rpx solid #d12a3e;
		}
	}
}
.goods-item{
	padding: 30rpx;
	background: rgba(255, 250, 245, 1);
	border-radius: 20rpx;
	margin-bottom: 30rpx;
	align-items: center;
	.icon-box{
		box-sizing: border-box;
	}
	.icon{
		box-sizing: border-box;
		width: 18px;
		height: 18px;
		padding: 4px;
		border: 1px solid #ccc;
		border-radius: 10px;
		margin-right: 30rpx;
		.icon-content{
			width: 8px;
			height: 8px;
			border-radius: 4px;
			background: #fff;
		}
		&.active{
			border: 1px solid #ce2e3a;
			.icon-content{
				background: #ce2e3a;
			}
		}
	}
	.img{
		width: 160rpx;
		height: 160rpx;
		margin-right: 30rpx;
		flex-shrink: 0;
	}
	.item-right{
		flex-grow: 1;
		.item-right-top{
			margin-bottom: 20rpx;
		}
		.type{
			font-size: 22rpx;
			line-height: 36rpx;
			color: #666;
		}
		.name{
			font-size: 26rpx;
			line-height: 36rpx;
			font-weight: 700;
			color: #333;
			display:-webkit-box;  
			-webkit-box-orient:vertical;  
			-webkit-line-clamp:2;  
			overflow:hidden;
			margin-right: 40rpx;
		}
		.price{
			text-align: right;
			font-size: 26rpx;
			line-height: 36rpx;
			font-weight: 700;
			color: rgba(214, 142, 127, 1);
		}
	}
}
.nomore{
	text-align: center;
	.haveno{
		margin: 0 auto;
	}
}
.bottom{
	align-items: center;
	box-sizing: border-box;
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 100rpx;
	background: rgba(255, 250, 245, 1);
	padding: 10rpx 30rpx;
	.bottom-left{
		height: 80rpx;
		box-sizing: border-box;
		padding-top: 24rpx;
	}
	.icon{
		box-sizing: border-box;
		width: 18px;
		height: 18px;
		border: 1px solid #ccc;
		border-radius: 10px;
		margin-right: 30rpx;
		padding: 4px;
		.icon-content{
			width: 8px;
			height: 8px;
			border-radius: 4px;
			background: #fff;
		}
		&.active{
			border: 2rpx solid rgba(214, 142, 127, 1);
			.icon-content{
				background: rgba(214, 142, 127, 1);
			}
		}
	}
	.text{
		font-size: 26rpx;
		line-height: 32rpx;
		color: #666;
	}
	.bottom-right{
		align-items: center;
	}
	.btn{
		width: 160rpx;
		height: 80rpx;
		border-radius: 40rpx;
		background: rgba(214, 142, 127, 1);
		color: #fff;
		text-align: center;
		font-size: 28rpx;
		line-height: 80rpx;
		box-shadow: 10rpx 10rpx 20rpx rgba(189, 185, 166, 0.5);
	}
}
</style>
